<!doctype html>
<html>
    <head>
        <title>easyXDM</title>
        <script type="text/javascript" src="../easyXDM.debug.js">
        </script>
        <script type="text/javascript">
            /**
             * Request the use of the JSON object
             */
            easyXDM.DomHelper.requiresJSON("../json2.js");
        </script>
        <script type="text/javascript">
            var REMOTE = (function(){
                var remote = location.href;
                switch (location.host) {
                    case "provider.easyxdm.net":
                        location.href = remote.replace("provider", "consumer");
                        break;
                    case "easyxdm.net":
                        remote = remote.replace("easyxdm.net", "consumer.easyxdm.net");
                        break;
                    case "consumer.easyxdm.net":
                        remote = remote.replace("consumer", "provider");
                        break;
                    case "xdm1":
                        remote = remote.replace("xdm1", "xdm2");
                        break;
                }
                return remote.substring(0, remote.lastIndexOf("/"));
            }());
            var remote = new easyXDM.Rpc(/** The channel configuration */{
                /**
                 * Register the url to hash.html, this must be an absolute path
                 * or a path relative to the root.
                 * @field
                 */
                local: "../name.html",
                swf: REMOTE + "/../easyxdm.swf",
                /**
                 * Register the url to the remote interface
                 * @field
                 */
                remote: REMOTE + "/remotemethods.html",
                remoteHelper: REMOTE + "/../name.html",
                /**
                 * Register the DOMElement that the generated IFrame should be inserted into
                 */
                container: "embedded",
                props: {
                    style: {
                        border: "2px dotted red",
                        height: "200px"
                    }
                },
                onReady: function(){
                    /**
                     * Call a method on the other side
                     */
                    remote.noOp();
                }
            }, /** The interface configuration */ {
                remote: {
                    addNumbers: {},
                    multiplyNumbers: {},
                    noOp: {}
                },
                local: {
                    alertMessage: function(msg){
                        alert(msg);
                    }
                }
            });
            
            function add(a, b){
                remote.addNumbers(a, b, function(result){
                    alert(a + " + " + b + " = " + result);
                });
            }
            
            function multiply(a, b){
                remote.multiplyNumbers(a, b, function(result){
                    alert(a + " x " + b + " = " + result);
                });
            }
        </script>
        <style type="text/css">
            
            #embedded iframe {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div style="border:1px solid black;padding:3px;margin:10px;">
            <a href="index.html">Index of examples</a>
            | <a href="http://github.com/oyvindkinsey/easyXDM/#readme">Readme at github</a>
            | 
            | <a href="http://easyxdm.net/">easyXDM.net</a>
            | <a href="http://groups.google.com/group/easyxdm">easyXDM at Google Groups</a>
            <br/>
            The examples are executing slower than the production build due to the extensive tracing.
            <br/>
            If you are alerted about a popup, then this is only the trace log feature. You can ignore this.
        </div>
        <script type="text/javascript">
            document.write("Domain: " + location.host);
        </script>
        <!-- easyXDM.Debug.trace(msg) will output its messages to any element with the id "log" -->
        <div id="log" style="height:100px;border:1px dotted black;overflow:auto">
        </div>
        <div id="embedded">
        </div>
        <div>
            The remote implementation is synchronous and will return immediately
            <br/>
            <input type="button" onclick="add(3,5);" value="call addNumbers on remote domain"/>
            <br/>
            <br/>
            The remote implementation of multiplyNumbers is asynchronous and will return after 5seconds
            <br/>
            This shows that you can use async calls in the remote method, eg. XHR calls
            <br/>
            <input type="button" onclick="multiply(3,5);" value="call multiplyNumbers on remote domain"/>
            <br/>
            <br/>
            This calls a non-returning method on the remote side
            <br/>
            <input type="button" onclick="remote.noOp();" value="call noOp on the remote domain"/>
        </div>
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            if (location.host.indexOf("easyxdm.net") !== -1) {
                try {
                    var pageTracker = _gat._getTracker("UA-9535591-3");
                    pageTracker._setDomainName(".easyxdm.net");
                    pageTracker._trackPageview();
                } 
                catch (err) {
                }
            }
        </script>
    </body>
</html>
